<template>
    <div class="dataViewer-box">
        <div class="dataViewer-toolbar">
            <el-row :gutter="10">
                <el-col :span="1.5">
                    <el-tooltip effect="light" content="保存" placement="top-start">
                        <el-button icon="el-icon-videoPlay" plain circle size="small" @click="contentSaveHandle" />
                    </el-tooltip>

                </el-col>
                <el-col :span="1.5">
                    <el-tooltip effect="light" content="查看设置" placement="top-start">
                        <el-dropdown @command="viewerSettingHandler" trigger="click">
                            <el-button icon="el-icon-setting" plain circle size="small" />
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="base64Encode">Base64编码</el-dropdown-item>
                                    <el-dropdown-item command="base64Decode">Base64解码</el-dropdown-item>
                                    <el-dropdown-item command="json">JSON</el-dropdown-item>
                                    <el-dropdown-item command="text">文本</el-dropdown-item>
                                    <el-dropdown-item command="xml">XML</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-tooltip>
                </el-col>
            </el-row>
        </div>
        <div class="dataViewer-content">
            <el-input v-model="inputValue.value" input-style="height: 100%;" type="textarea" />
        </div>
    </div>
</template>

<script>

export default {
    name: 'dataViewer',

};
</script>

<script setup>
import { ref, defineProps, defineExpose } from "vue"
import { Base64 } from "js-base64";
import _ from "lodash"

const props = defineProps({
    value: Object
})
const inputValue = ref(props);
const oldValue={}
const upateData = (data) => {
    inputValue.value = data;
    oldValue.value = _.cloneDeep(data);
}
const contentSaveHandle = () => {

}
const isJSON = (str) => {
    if (typeof str == "string") {
        try {
            JSON.parse(str);
            return true;
        } catch (e) {
            return false;
        }
    } else {
        return false;
    }
}
const viewerSettingHandler = (command) => {
    debugger
    if (command === 'base64Encode') {
        inputValue.value.value = Base64.encode(inputValue.value.value);
        if (!inputValue.value.value) {
            inputValue.value.value = oldValue.value.value;
        }
    }
    if (command === 'base64Decode') {
        inputValue.value.value = Base64.decode(inputValue.value.value);
        if (!inputValue.value.value) {
            inputValue.value.value = oldValue.value.value;
        }
    }
    if (command === 'json') {
        if(isJSON){
            inputValue.value.value =   JSON.stringify(JSON.parse(inputValue.value.value), null, '\t');
        }
    }
    if (command === 'text') {
        inputValue.value.value = oldValue.value.value;
    }
}
//设置可访问参数和方法
defineExpose({ 'name': 'dataViewer', upateData })
</script>
<style lang="scss" scoped>
.dataViewer-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;

    .dataViewer-toolbar {
        padding: 5px;
        height: 25px;
    }

    .dataViewer-content {
        flex: 1;
    }
}
</style>